<template>
  <view>
    <u-navbar :background="{ background: '' }" back-icon-color="#222222" title-color="#222222" title="送锦旗" :immersive="true" :border-bottom="false"></u-navbar>
    <view class="" style="width: 100%; height: 150rpx; background: url(https://wenzhen.fuerle168.com/static/index/bg.png) no-repeat; background-size: 100% 100%"></view>
    <view class="" style="margin: 28rpx; background: #fff; box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.1); border-radius: 20rpx">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 44rpx 0 44rpx 5rpx">
        <view class="" style="display: flex; align-items: center; padding-left: 30rpx">
          <image :src="doctor.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border: 2rpx solid #ffffff; border-radius: 50%"></image>
          <view class="" style="padding-left: 25rpx">
            <view class="">
              <text style="font-size: 32rpx; font-weight: bold">{{ doctor.doctor_name }}</text>
              <text style="font-size: 26rpx; padding-left: 15rpx">{{ doctor.doctor_title }}</text>
            </view>

            <view class="btn" style="margin-top: 13rpx">
              <image src="https://wenzhen.fuerle168.com/static/index/qiicon.png" mode="" style="width: 24rpx; height: 24rpx"></image>
              收到{{ doctor.flags_nums }}面锦旗
            </view>
          </view>
        </view>
        <!-- 分 -->
      </view>
    </view>
    <view class="" style="height: 60rpx"></view>
    <!-- 送旗子 -->
    <view class="" style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 0 0rpx">
      <view class="" style="text-align: center; margin-top: 44rpx; width: 33.3%" v-for="i in list">
        <image :src="img_url + i.flags_image" mode="" style="width: 138rpx; height: 138rpx"></image>
        <view class="" style="font-size: 28rpx">
          {{ i.flags_title }}
        </view>
        <view
          class=""
          style="width: 88rpx; height: 42rpx; background: #1a9eff; border-radius: 21rpx; line-height: 42rpx; text-align: center; font-size: 26rpx; color: #fff; margin: 9rpx auto"
          @tap="(flags_id = i.flags_id), (pic = i.price), (show = true)"
        >
          选择
        </view>
      </view>
    </view>
    <!-- 赠送记录 -->
    <view class="" style="height: 20rpx; width: 100%; background: #f8f8f8; margin-top: 45rpx"></view>
    <view class="" style="font-size: 32rpx; font-weight: bold; padding: 28rpx 0 14rpx 28rpx">赠送记录</view>
    <view class="" style="display: flex; align-items: flex-start; padding: 14rpx 28rpx" v-for="i in log">
      <view class="" style="display: flex; align-items: flex-start">
        <image :src="img_url + i.image" mode="" style="width: 138rpx; height: 138rpx"></image>
        <view class="">
          <view class="" style="font-size: 28rpx; font-weight: bold">
            {{ i.title }}
          </view>
          <view class="" style="font-size: 26rpx; color: #999; padding-top: 30rpx">
            {{ i.content }}
          </view>
        </view>
      </view>
      <view class="" style="font-size: 26rpx; color: #999; width: 160rpx">
        {{ i.create_time_text }}
      </view>
    </view>

    <u-modal v-model="show" :show-cancel-button="true" title="选择患者" @confirm="confirm">
      <view class="slot-content">
        <view
          class=""
          v-for="(i, k) in arr"
          :key="k"
          style="display: flex; align-items: center; font-size: 28rpx; justify-content: space-between; padding: 28rpx 51rpx"
          @tap="current = k"
        >
          <view class="">
            {{ i.patient_name }}
          </view>
          <radio :checked="current == k" style="transform: scale(0.7)" color="#0FB8FF"></radio>
        </view>
      </view>
      <view class="" style="text-align: center; font-size: 30rpx; color: #1a9eff; margin: 30rpx 0" @tap="add">添加患者</view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      raios: true,
      count: 5,
      value: 2,
      list: [],
      show: false,
      jook: [
        {
          id: 1,
          txt: '马小跳（男 26岁）'
        },
        {
          id: 2,
          txt: '林澜风（女 25岁）'
        }
      ],
      id: null,
      page: 1,
      doctor: {},
      log: [],
      arr: [],
      current: 0,
      flags_id: null,
      pic: null
    };
  },
  methods: {
    add() {
      uni.navigateTo({
        url: '/pages/user/data'
      });
    },
    goget() {
      uni.navigateTo({
        url: 'allgongg'
      });
    },
    confirm() {
      uni.navigateTo({
        url: 'sendpay?doctor_id=' + this.id + '&patient_id=' + this.arr[this.current].patient_id + '&flags_id=' + this.flags_id + '&pic=' + this.pic
      });
    },
    boss() {
      this.api({
        url: '/api/doctor/flagsList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
      });

      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.arr = res.data;
      });
    },
    cz() {
      this.api({
        url: '/api/doctor/flagsLogs',
        method: 'post',
        data: {
          doctor_id: this.id,
          page: this.page
        }
      }).then((res) => {
        this.doctor = res.data.doctor;
        this.log = this.log.concat(res.data.log);
        this.page++;
      });
    }
  },
  onShow() {
    this.boss();
    this.cz();
  },
  onLoad(op) {
    this.id = op.id;
  }
};
</script>

<style>
.btn {
  /* width: 140rpx; */
  height: 41rpx;

  background: #ffde97;

  border-radius: 19rpx;
  text-align: center;
  font-size: 22rpx;
  color: #964e06;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
